<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Table</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
        <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        table{
            text-align: center;
        }
        table th{
            text-align: center;
            color: rgb(121, 121, 121);
            font-size: 23px;
        }
        table td{
            font-size: 16px;
        }
        button{
            border: none;
            outline: none;
        }
        form{
            width: 800px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #error{
            width: 720px;
            height: 25px;
            line-height: 25px;
            color: rgb(121, 121, 121);
            margin: 0 auto;
            margin-bottom: 10px;
            text-align: center;
            font-size: 25px;
            font-weight: 600;
        }
    </style>
    <body>
        <form class="form1 form-inline" action="#">
            <div class="form-group">
              <label class="sr-only" for="name">商品名称</label>
              <input type="text" class="form-control" id="name" placeholder="商品名称">
            </div>
            <div class="form-group">
                <label class="sr-only" for="price">价格</label>
                <input type="text" class="form-control" id="price" placeholder="价格">
              </div>
            <div class="form-group">
              <label class="sr-only" for="stock">库存</label>
              <input type="text" class="form-control" id="stock" placeholder="库存">
            </div>
            <button type="submit" class="btn btn-default">添加</button>
        </form>
        
        <form class="form2 form-inline" action="#">
            <div class="form-group">
              <label class="sr-only" for="name">商品名称</label>
              <input type="text" class="form-control" id="name" placeholder="商品名称[编辑]">
            </div>
            <div class="form-group">
                <label class="sr-only" for="price">价格</label>
                <input type="text" class="form-control" id="price" placeholder="价格[编辑]">
              </div>
            <div class="form-group">
              <label class="sr-only" for="stock">库存</label>
              <input type="text" class="form-control" id="stock" placeholder="库存[编辑]">
            </div>
            <button type="submit" class="btn yes btn-default">修改完成</button>
            <button type="button" class="btn not btn-default">取消修改</button>
        </form>
        <p id="error"></p>
        <table class="table table-bordered table-striped ">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>华为</td>
                    <td>4999</td>
                    <td>100</td>
                    <td><button class="btn edit btn-primary">编辑</button></td>
                    <td><button class="btn del btn-danger">删除</button></td>
                </tr>
                <tr class="success">
                    <td>oppo</td>
                    <td>4999</td>
                    <td>100</td>
                    <td><button class="btn edit btn-primary">编辑</button></td>
                    <td><button class="btn del btn-danger">删除</button></td>
                </tr>
                <tr class="warning">
                    <td>小米</td>
                    <td>4999</td>
                    <td>100</td>
                    <td><button class="btn edit btn-primary">编辑</button></td>
                    <td><button class="btn del btn-danger">删除</button></td>
                </tr>
                <tr class="danger">
                    <td>vivo</td>
                    <td>4999</td>
                    <td>100</td>
                    <td><button class="btn edit btn-primary">编辑</button></td>
                    <td><button class="btn del btn-danger">删除</button></td>
                </tr>
                <tr class="info">
                    <td>荣耀</td>
                    <td>4999</td>
                    <td>100</td>
                    <td><button class="btn edit btn-primary">编辑</button></td>
                    <td><button class="btn del btn-danger">删除</button></td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        $(function(){
            $('.form2').hide()
        })
        var color=new Array(5)//新增加的tr五个背景颜色
        color=['active','success','warning','danger','info']
        var c=0

        $('table .del').click(function(){//删除
        var bool=confirm('您确定要删除'+$(this).parent().parent().children('td:first').text()+'吗')
        if(!bool){
            return
        }
        $(this).parent().parent().remove()
        })

        $('.form1 .btn').click(function(){//添加
            ret=1
            arr=new Array(3)
            i=0
            $('.form1 input').each(function(){
                if($(this).val()==""||$(this).val()==null){//判断填写栏是否完整填写
                    alert('请填写'+$(this).prop('placeholder'))
                    ret=-1
                    return
                }
                arr[i]=$(this).val()//把每一个input的值抽取出来放在arr数组里面
                i++
            })
            console.log(ret)
            if(ret==-1){
                return
            }
            //到这说明填写栏填写完成，可以添加东西了
            $('tbody').append('<tr class="'+color[c]+'"><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="btn edit btn-primary">编辑</button></td><td><button class="btn del btn-danger">删除</button></td></tr>')
            c+=1
            if(c>=5){
                c=0
            }
            $('.form1 input').val('')//添加完后把栏里的东西清空

            $('table .del').click(function(){//删除
                var bool=confirm('您确定要删除'+$(this).parent().parent().children('td:first').text()+'吗')
                if(!bool){
                    return
                }
                $(this).parent().parent().remove()
            })

            $('table .edit').click(function(){//编辑
            $('#error').html('')
            $('.form2 input').val('')//清空修改栏的东西
            $('.form2').show()
            arr=new Array(3)
            tr=$(this).parent().parent()//<tr>
            ret=1
            $('.form2 .yes').click(function(){//编辑完成
                i=0
                $('.form2 input').each(function(){
                    if($(this).val()==""||$(this).val()==null){//判断填写栏是否完整填写
                        // alert('请填写'+$(this).prop('placeholder'))
                        $('.form2').hide()
                        ret=-1
                        return
                    }
                    arr[i]=$(this).val()//把每一个input的值抽取出来放在arr数组里面
                    i++
                })
                if(ret==-1){
                    $('#error').html('修改失败,或许少了些什么?')
                    return //return表示该不修改内容
                }
                tr.children().eq(0).html(arr[0])
                tr.children().eq(1).html(arr[1])
                tr.children().eq(2).html(arr[2])
                $('.form2').hide()
            })
            if(ret==-1){
                return
            }

            $('.form2 .not').click(function(){//编辑取消
                $('.form2').hide()
            })
            })
        })

        $('table .edit').click(function(){//编辑
            $('#error').html('')
            $('.form2 input').val('')//清空修改栏的东西
            $('.form2').show()
            arr=new Array(3)
            tr=$(this).parent().parent()//<tr>
            ret=1
            $('.form2 .yes').click(function(){//编辑完成
                i=0
                $('.form2 input').each(function(){
                    if($(this).val()==""||$(this).val()==null){//判断填写栏是否完整填写
                        // alert('请填写'+$(this).prop('placeholder'))
                        $('.form2').hide()
                        ret=-1
                        return
                    }
                    arr[i]=$(this).val()//把每一个input的值抽取出来放在arr数组里面
                    i++
                })
                if(ret==-1){
                    $('#error').html('修改失败,或许少了些什么?')
                    return //return表示该不修改内容
                }
                tr.children().eq(0).html(arr[0])
                tr.children().eq(1).html(arr[1])
                tr.children().eq(2).html(arr[2])
                $('.form2').hide()
            })
            if(ret==-1){
                return
            }

            $('.form2 .not').click(function(){//编辑取消
                $('.form2').hide()
                })
        })
    </script>
</html>